
<template>
  <main>
    <h1>This is home page</h1>
    <button @click="handleClick">更新组件状态</button>
    <Child1 />
  </main>
</template>

<script setup>
import Child1 from '../components/Child1.vue'
import { provide,ref } from 'vue'

// 只有用reactive或ref定义的响应式数据,数据的值发生改变后, 内层组件才会更新
var num = ref(888)
var arr = ref([1,2,3])

// 对于没有用reactive或ref定义的数据, 这些数据属于非响应式数据, 当数据的值发生改变后, 内层组件也不会更新.
// var num = 888
// var arr = [1,2,3]

//通过provide函数向内层组件传值
provide('num',num)
provide('arr',arr)

var handleClick = ()=>{
  num.value = 999;
  arr.value.push( 10 )
  // num = 999
  // arr.push(10)
  // console.log(num,arr);
}

</script>